import React, { useEffect, useState } from 'react'
import { Form, Input, InputNumber, Popconfirm, Table, Typography } from 'antd';
import axios from "axios";
import api from '../../server/Api';
import './CustomerManagement.css'


export default function CustomerManagement() {
    const [dataSource, setDataSource] = useState([]);
    const [loading, setLoading] = useState(true);
    const columns = [
        {
            title: '客户名称',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '水表编号',
            dataIndex: 'waterMeterId',
            key: 'waterMeterId',
        },
        {
            title: '账单时间',
            dataIndex: 'billTime',
            key: 'billTime',
        },
        {
            title: '用水类型',
            dataIndex: 'basicPriceType',
            key: 'basicPriceType',
        },
        {
            title: '计费日期',
            dataIndex: 'settlementTime',
            key: 'settlementTime',
        },
        {
            title: '实际用水量',
            dataIndex: 'readMeterDegree',
            key: 'readMeterDegree',
        },
        {
            title: '应收金额',
            dataIndex: 'receivable',
            key: 'receivable',
        },
        {
            title: '实收金额',
            dataIndex: 'officialReceipts',
            key: 'officialReceipts',
        },

        {
            title: '已收金额',
            dataIndex: 'received',
            key: 'received',
        },
        {
            title: '未缴金额',
            dataIndex: 'unpaid',
            key: 'unpaid',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (_, record) => {
                return (
                    <>
                        <Typography.Link onClick={() => edit(record.payId)}>
                            Edit
                        </Typography.Link>
                        <span></span>
                        <Typography.Link onClick={() => Remove(record)}>
                            Remove
                        </Typography.Link>
                    </>
                );
            },
        },
    ];

    // 清除删除修改之后的副作用
    useEffect(() => {
        getUserInfo()
    }, []);

    // 获取后台数据
    const getUserInfo = () => {
        setTimeout(() => {
            axios.post(`${api}/getPayInfo`).then(function (response) {
                console.log(response);
                setDataSource(response.data.data);
                setLoading(false);
            }).catch(function (error) {
                console.log(error)
            });
        }, 1000)
    }

    // 修改操作
    const edit = (value) => {
        console.log(value)
        setDataSource([])
    }

    // 删除操作
    const Remove = (value) => {
        console.log(value)
    }

    return (
        <div className='table'>
            <Form>
                <Table
                    bordered
                    dataSource={dataSource}
                    columns={columns}
                    loading={loading}
                    rowKey={(record) => record.payId} />;
            </Form>
        </div>
    )
}
